<template>
	<view v-if="open" class="">
		<view class="bg">
			<view class="content">
				<view class="head">
					新增需求
					<image @click="handleClose" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/guanbi.png" mode=""></image>
				</view>
				<view class="form">
					<view class="title">需求标题</view>
					<input v-model="form.title" maxlength="20" type="text" placeholder="输入需求标题" />
					<view class="title">需求内容</view>
					<view class='textarea'>
						<ws-textarea v-model='form.description' :maxlength='desLength' placeholder='输入需求内容' 
							></ws-textarea>
						<view class='length'>{{form.description?form.description.length:0}}/{{desLength}}</view>
					</view>
				</view>
				<view class="btn" @click="affirm">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { pageServePage,addNeed } from "@/api/pet/service/buyer"
	export default {
		data(){
			return{
				open:false,
				item:{},
				form:{
					title:"",
					content:""
				},
				desLength:200,
			}
		},
		methods:{
			reset(){
				this.form = {
					title:"",
					content:""
				}
			},
			affirm(){
				let form = this.form
				if(!form.title){
					uni.showToast({
						title:"请输入标题",
						icon:"none"
					})
					return
				}
				if(!form.description){
					uni.showToast({
						title:"请输入内容",
						icon:"none"
					})
					return
				}
				addNeed({
					...form
				}).then(res=>{
					if(res){
						this.reset()
						uni.showToast({
							title:"发布成功"
						})
						this.handleClose()
						this.item.success && this.item.success()
					}
				})
			},
			handleOpen(e){
				this.form = {
					title:"",
					content:""
				}
				this.open = true
				this.item = e
			},
			handleClose(){
				this.open = false
			}
		},
	}
</script>

<style>
</style>
<style scoped lang="scss">
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1026;
		background: rgba(0, 0, 0, .5);
		.content{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding-bottom: 76rpx;
			.head{
				width: 100%;
				padding: 32rpx 0 80rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: var(--h1Color);
				line-height: 42rpx;
				text-align: center;
				position: relative;
				image{
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.form{
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: var(--h1Color);
					line-height: 42rpx;
					margin-bottom: 24rpx;
				}
				input{
					width: 100%;
					height: 90rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					padding-left: 28rpx;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #000;
					line-height: 42rpx;
					margin-bottom: 80rpx;
				}
				.textarea {
					margin-top: 24rpx;
					width: 100%;
					height: 400rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					padding: 24rpx 28rpx 60rpx 24rpx;
					position: relative;
					font-size: 30rpx;
					
					.length {
						position: absolute;
						bottom: 24rpx;
						right: 28rpx;
						font-size: 24rpx;
						color: #BBBBBB;
					}
				}
			}
			.btn{
				width: 686rpx;
				margin: 68rpx auto 0;
				background: var(--primaryGradBg);
				border-radius: 48rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--btnColor);
				line-height: 96rpx;
				text-align: center;
			}
		}
	}
</style>